<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .oneContain {
    width: calc(100% - 10px);
    height: 65vh;
  }
</style>
<template>
  <div>
    <Modal :value="show" :title="property.name" :footer-hide="true" width="1750px" class-name="ivu-modal-wrap" @on-change="modalChange" @on-cancel="cancel">
<!--      <p slot="header" style="color:#f60;text-align:center">-->
<!--        <span>Delete confirmation</span>-->
<!--      </p>-->
      <Card dis-hover>
        <!-- <p slot="title">{{property.name}}</p> -->
        <div class="btnContain"> <span>最近</span>
          <RadioGroup v-model="queryObj.dayCnt"  type="button" @on-change="doQuery">
            <Radio label="1">1天</Radio>
            <Radio label="3">3天</Radio>
            <Radio label="7">1周</Radio>
          </RadioGroup>
          <!--   <ButtonGroup
            <Button :type="btnGroup.type.flow?'primary':'default'" :ghost="btnGroup.type.flow" @click="typeClick('flow')">流量</Button>
            <Button :type="btnGroup.type.pressure?'primary':'default'" :ghost="btnGroup.type.pressure" @click="typeClick('pressure')">压力</Button>
            <Button :type="btnGroup.type.speed?'primary':'default'" :ghost="btnGroup.type.speed" @click="typeClick('speed')">流速</Button>
          </ButtonGroup>-->
          <DatePicker :value="dateRangeValue" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end" placeholder="请选择日期范围" style="width: 300px"  id="date"   @on-change="handleChange"  @on-ok="change" ></DatePicker>
          <RadioGroup v-model="queryObj.timeLevel" type="button" @on-change="doQuery">
            <Radio label="1">秒</Radio>
            <Radio label="2">分</Radio>
            <Radio label="3">时</Radio>
            <Radio label="4">日</Radio>
            <Radio label="5">月</Radio>
            <Radio label="6">年</Radio>
          </RadioGroup>
          <Tooltip content="刷新" placement="right">
            <Button type="primary" shape="circle" icon="md-refresh" @click.native="refresh()"></Button>
          </Tooltip>
        </div>
        <div :id="chartID" ref="chartID" class="oneContain"></div>
      </Card>
    </Modal>
  </div>
</template>
<script>
  export default {
    props: {
      property: Object,
      show: {
        type: Boolean,
        default: false
      },
      did: Number
    },
    created: function () {
      // {"id":51,"dataLen":2,"isGet":1,"name":"DI1","unit":null,"propertyType":100,"valueAddr":100,"value":"0.00","warnDown":99,"warnUp":0}
    },
    data () {
      return {
        dateRangeValue: [],
        // chartModal: {
        //   show: false
        // },
        queryObj: {
          // 查询的对象
          id: this.did,
          dayCnt: '1',
          timeLevel: '1',
          dataType: this.property.name,
          endTime: '',
          startTime: ''
        },
        oneChart: null,
        oneOption: {
          title: {
            text: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {
              saveAsImage: { show: true }
            },
            right: 40
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            name: '时间',
            boundaryGap: false,
            data: []
          }],
          yAxis: [{
            type: 'value',
            scale: true,
            name: this.property.name + '(' + this.property.unit + ')'
          }],
          series: [{
            data: [],
            type: 'line',
            smooth: true
          }]
        },
        value3: '',
        radioshow: false,
        datapinkshow: true,
        dataTimeshow: 1
      }
    },
    watch: {
      show: function (newValue, oldValue) {
        if (newValue) {
          // this.chartModal.show = true
          this.show = true
          if (!this.oneChart) {
            this.initChart()
            setTimeout(() => { this.doQuery() }, 200)
          } else {
            this.doQuery()
          }
        } else {
          // this.chartModal.show = false
          this.show = false
        }
      },
      daterange: function (newValue, oldValue) {
        if (String(newValue) !== String(newValue)) {
          this.query()
        }
      }
    },
    computed: {
      chartID: function () {
        // 使用属性的id作为id，不能使用设备的id，要不然，相同的echart实例出现
        return 'id' + this.did + this.property.id
      }
    },
    mounted: function () {
    },
    methods: {
      // 取消
      cancel () {
        this.$emit('cancel')
      },
      handleChange (date) {
        this.value3 = date
      },
      change: function () {
        this.queryObj.startTime = this.value3[0]
        this.queryObj.endTime = this.value3[1]
        this.dataTimeshow = 2
        this.doQuery()
      },
      initChart: function () {
        this.$nextTick(() => {
          // this.oneChart = this.$echarts.init(document.getElementById(this.chartID))
          this.oneChart = this.$echarts.init(this.$refs.chartID)
          window.onresize = () => {
            this.oneChart.resize()
          }
        })
      },
      recentTimeChange: function (newValue) {
        // 最近时间 radioGroup 选项改变
        console.log('newValue', this.queryObj)
      },
      timeTypeChange: function (newValue) {
        // 最近时间 radioGroup 选项改变
        console.log('newValue', this.queryObj)
      },
      visibleChange: function (b) {
        if (b) {}
      },
      // cancel: function () {
      //   this.$emit('close', false)
      // },
      modalShow: function () {
        this.show = true
      },
      modalHide: function () {
        this.show = false
      },
      doQuery: function () {
        var curDate = new Date()
        let endTime = curDate
        let startTime = ''
        if (this.queryObj.dayCnt && this.dataTimeshow == 1) {
          if (this.queryObj.dayCnt == '1') {
            startTime = new Date(curDate.getTime() - 24 * 60 * 60 * 1000)
          } else if (this.queryObj.dayCnt == '3') {
            startTime = new Date(curDate.getTime() - 24 * 60 * 60 * 1000 * 3)
          } else if (this.queryObj.dayCnt == '7') {
            startTime = new Date(curDate.getTime() - 24 * 60 * 60 * 1000 * 7)
          }
          let Seconds = ''
          if (endTime.getSeconds() <= 9) {
            Seconds = '0' + endTime.getSeconds()
          } else {
            Seconds = endTime.getSeconds()
          }
          let econds = ''
          if (endTime.getSeconds() <= 9) {
            econds = '0' + startTime.getSeconds()
          } else {
            econds = startTime.getSeconds()
          }
          let minus = ''
          if (endTime.getMinutes() <= 9) {
            minus = '0' + startTime.getMinutes()
          } else {
            minus = startTime.getMinutes()
          }
          let minu = ''
          if (startTime.getMinutes() <= 9) {
            minu = '0' + endTime.getMinutes()
          } else {
            minu = endTime.getMinutes()
          }
          this.queryObj.startTime = startTime.getFullYear() + '-' + (startTime.getMonth() + 1) + '-' + startTime.getDate() + ' ' + startTime.getHours() + ':' + minu + ':' + Seconds
          this.queryObj.endTime = endTime.getFullYear() + '-' + (endTime.getMonth() + 1) + '-' + endTime.getDate() + ' ' + endTime.getHours() + ':' + minus + ':' + econds
        }
        // 执行数据请求
        this.oneChart.showLoading({ text: '请求数据.....' })
        window.myapi.do_post('iot/dev/realData', this.queryObj).then(resp => {
          this.dataTimeshow = 1
          if (resp.status === 200 && resp.data.status === 200) {
            this.oneInit(resp.data.data.iotCollItemDatas[0].value)
          } else {
            this.$Notice.error({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
          this.$Notice.error({
            title: '提示',
            desc: error
          })
        }).finally(() => {
          this.oneChart.hideLoading()
        })
      },
      modalChange: function (status) {
        if (!status) {
           this.modalHide()
        }
      },
      oneInit: function (chartData) {
        this.oneChart.clear()
        this.oneOption.xAxis[0].data = chartData.xaxis
        this.oneOption.series[0].data = chartData.yaxis
        // 绘制图表
        this.oneChart.setOption(this.oneOption)
      },
      // 随机生成十六进制颜色
      randomHexColor: function () {
        var hex = Math.floor(Math.random() * 16777216).toString(16)// 生成ffffff以内16进制数
        while (hex.length < 6) { // while循环判断hex位数，少于6位前面加0凑够6位
          hex = '0' + hex
        }
        return '#' + hex // 返回‘#'开头16进制颜色
      },
      // 刷新
      refresh: function () {
        this.doQuery()
      }
    },
    destroyed: function () {
      window.onresize = null
      this.oneChart = null
    }
  }

</script>
